<template>
	<div class="page-container about-container">
		<h1>关于</h1>
		<h3>我向风而行 追寻自由的呼唤</h3>
		<p>一款使用纯前端技术实现的工具合集网站</p>
		<h4>工具</h4>
		<table>
			<thead>
				<tr>
					<th>分类</th>
					<th>工具名称</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="category in categories" :key="category.name">
					<td>{{category.name}}</td>
					<td>
						<ul>
							<li v-for="tool in category.tools" :key="tool.name">{{tool.name}}</li>
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
		<p>总计：{{getToolsCount()}}</p>
		<h4></h4>
		<h4>开源</h4>
		<p class="gitee">
			<svg t="1687780578635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="2304" width="50" height="50">
				<path
					d="M456.106667 145.066667L172.373333 828.16c-22.186667 53.76 30.72 107.733333 81.493334 83.2L512 786.986667l257.92 124.373333c50.773333 24.533333 103.893333-29.44 81.493333-83.2L567.893333 145.066667c-21.12-51.2-90.666667-51.2-111.786666 0z"
					fill="#007BFF" p-id="2305" data-spm-anchor-id="a313x.7781069.0.i2" class="selected"></path>
				<path
					d="M552.96 774.186667l363.093333-303.146667c45.866667-38.4 18.773333-113.066667-40.96-113.066667H148.906667c-59.733333 0-87.04 74.88-40.96 113.066667l363.093333 303.146667c23.68 19.84 58.24 19.84 81.92 0z"
					fill="#d81e06" p-id="2306" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path>
			</svg>
			<svg t="1687771025969" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="2473" width="50" height="50">
				<path
					d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
					fill="#C71D23" p-id="2474"></path>
			</svg>
			<svg t="1687780578635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="2304" width="50" height="50">
				<path
					d="M456.106667 145.066667L172.373333 828.16c-22.186667 53.76 30.72 107.733333 81.493334 83.2L512 786.986667l257.92 124.373333c50.773333 24.533333 103.893333-29.44 81.493333-83.2L567.893333 145.066667c-21.12-51.2-90.666667-51.2-111.786666 0z"
					fill="#007BFF" p-id="2305" data-spm-anchor-id="a313x.7781069.0.i2" class="selected"></path>
				<path
					d="M552.96 774.186667l363.093333-303.146667c45.866667-38.4 18.773333-113.066667-40.96-113.066667H148.906667c-59.733333 0-87.04 74.88-40.96 113.066667l363.093333 303.146667c23.68 19.84 58.24 19.84 81.92 0z"
					fill="#d81e06" p-id="2306" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path>
			</svg>
		</p>
		<p>
			<a href="https://gitee.com/kuiwaiwai/k-toolbox" target="_blank">Gitee Repositories</a><br />
			<a href="https://gitee.com/kuiwaiwai/k-toolbox/blob/master/LICENSE" target="_blank">MIT License</a>
		</p>
		<h3>如果觉得在这个网站里得到了帮助，那么欢迎Star项目仓库</h3>
	</div>
</template>

<script>
	import toolsData from '@/assets/tools.json';

	export default {
		data() {
			return {
				categories: toolsData.categories
			}
		},
		methods: {
			getToolsCount() {
				let count = 0;
				this.categories.forEach(category => {
					count += category.tools.length;
				});
				return count;
			}
		}
	};
</script>

<style lang="scss">
	.about-container {
		a {
			color: #007bff;
			text-decoration: none;
		}

		.gitee svg {
			animation: spin 2s linear infinite;
		}

		@keyframes spin {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		table {
			width: 80%;
			border-collapse: collapse;
			margin-bottom: 20px;
		}

		th,
		td {
			padding: 10px;
			text-align: left;
			border: 1px solid #ddd;
		}

		th {
			background-color: #f2f2f2;
			font-weight: bold;
			text-transform: uppercase;
		}

		tbody tr:nth-child(even) {
			background-color: #f9f9f9;
		}

		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}

		li {
			margin-bottom: 5px;
		}
	}
</style>
